<template>
	<!-- 回收发布 -->
	<view class="RecyclingAndPublishing">
		<view class="empty"></view>
		<view class="main">
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					买卖身份
				</view>
				<view class="main-item-right">
					<view class="flexjcc" :class="form.role == item.id ? 'tradeSelected' : 'trade'" v-for="(item, index) in trade"
						:key="index" @click="eventSelect(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					回收物品
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入物品名" v-model="form.title">
				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					报价
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入报价或要求" v-model="form.price">
				</view>
			</view>
			<view class="main-desc">
				<view class="main-desc-top">
					<text>描述</text>
					<textarea name="" v-model="form.desc" placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哟～"></textarea>
				</view>
				<view class="main-desc-bottom">
					<Uploading @change="onImgChange"></Uploading>

				</view>
			</view>
			<view class="main-item">
				<view class="main-item-left">
					联系方式
				</view>
				<view class="main-item-right">
					<input type="number" placeholder="输入联系方式" v-model="form.mobile">
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button @click="eventtitle">发布</button>
		</view>
	</view>
</template>

<script>
import Uploading from '@/components/Uploading/index.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		Uploading
	},
	data() {
		return {
			trade: [
				{
					name: '卖家',
					id: 1
				},
				{
					name: '买家',
					id: 2
				},
			],
			form: {
				role: 1,	// 身份
				price: '', //价格
				title: '',	// 回收物品
				desc: '',	// 描述
				mobile: '',	// 联系方式
				image: '' //图片
			}


		}
	},
	methods: {
		// 监听上传图片
		onImgChange(list) {
			this.form.image = list.join()
		},
		// 切换身份
		eventSelect(id) {
			this.form.role = id
		},
		// 发布
		eventtitle() {
			console.log(this.form.image);
			$api.recyclingAdd(this.form).then(res => {
				uni.navigateBack({
					delta: 1
				});
			})
		}
	}
}
</script>

<style lang="less" scoped>
.RecyclingAndPublishing {
	background: #FBFBFB;

	.empty {
		height: 19rpx;
	}

	.main {
		width: 690rpx;
		margin: auto;

		.main-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 14rpx;
			padding: 0 35rpx 0 39rpx;

			.main-item-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
			}

			.main-item-right {
				display: flex;
				align-items: center;
				text-align: right;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;

				// color: #858585;
				view:last-child {
					margin-left: 16rpx;
				}

				.trade {
					width: 92rpx;
					height: 38rpx;
					border: 1px solid #D4D4D4;
					border-radius: 19rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #91908F;
				}

				.tradeSelected {
					width: 92rpx;
					height: 38rpx;
					border: 1px solid #F14500;
					border-radius: 19rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F14500;
				}
			}
		}

		.main-desc {
			width: 690rpx;
			height: 382rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 12rpx;
			padding: 35rpx 34rpx 0 39rpx;
			margin-bottom: 14rpx;

			.main-desc-top {
				display: flex;

				text {
					display: inline-block;
					width: 100rpx;
				}

				textarea {
					width: 100%;
					height: 150rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
			}

			.main-desc-bottom {
				padding-top: 60rpx;
			}
		}
	}

	.footer-button {
		padding-top: 392rpx;

		button {
			width: 702rpx;
			height: 98rpx;
			background: #F14500;
			border-radius: 49rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}
	}
}
</style>